<template>
	<view class="u-f u-f-sbc hot-item">
		<view class="u-f u-f-ac hot-i-left">
			<text class="left-text">{{item.id }}</text>
			<text class="ellipsis">{{item.title}}</text>
		</view>
		<view class="u-f u-f-ac hot-i-right">
			<image src="/static/search/hot.png"></image>
			<text>{{ item.comment }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object,
				defalut:()=>{}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hot-item {
		margin: 30upx 0;
		.hot-i-left {
			width: 75%;
			position: relative;
			text:first-of-type {
				font-size: 42upx;
				font-weight: bold;
				color: #333333;
				font-style: italic;
				margin-right: 24upx;
			}
			text:last-of-type {
				font-size: 28upx;
				font-weight: bold;
				color: #333333;
				width: 90%;
			}
			.left-text:after {
				content: '';
				width: 20upx;
				height: 20upx;
				border-radius: 100%;
				background: linear-gradient(to bottom right, #9B9CA0, #D5D6D8);
				position: absolute;
				bottom: 2px;
				left: 32upx;
				z-index: -1;
			}
		}
		.hot-i-right {
			width: 25%;
			text-align: right;
			image {
				width: 35upx;
				height: 35upx;
				margin-right: 14upx;
			}
			text {
				font-size: 28upx;
				color: #F40D0D;
				font-weight: bold;
			}
		}
	}

	.hot-item:first-of-type {
		.hot-i-left {
			text:first-of-type {
				color: #F40D0D;
			}
			.left-text:after {
				background: linear-gradient(to bottom right, #F08285, #EDCCC4);
				left: 34upx;
			}
		}
	}

	.hot-item:nth-of-type(2) {
		.hot-i-left {
			text:first-of-type {
				color: #FFAD2D;
			}
			.left-text:after {
				background: linear-gradient(to bottom right, #F9C677, #FDE2B7);
				left: 34upx;
			}
		}
	}

	.hot-item:nth-of-type(3) {
		.hot-i-left {
			text:first-of-type {
				color: #19BFA0;
			}
			.left-text:after {
				background: linear-gradient(to bottom right, #72D6C7, #BAEDE8);
				left: 36upx;
			}
		}
	}
</style>
